4장 변수

4.1 변수란 무엇인가? 왜 필요한가?

변수는 데이터를 관리하기 위한 개념이다

10+20 이라는 식이 있을 때 사람의 머리속에서는

1. 숫자 10과 20을 두뇌에 기억(저장)한다. 이때는 10, + 20 이라는 기호의 의미를 알고 이해한다 (리터럴과 연산자)
2. 연산한다 이때 표현식의 의미를 해석파싱한다
3. 연산한 결과를 두뇌에 기억(저장)한다 이 순서가 이루어진다

사람은 저 과정을 모두 두뇌에서 처리하지만, 컴퓨터는 기억, 연산 하는 과정이 다른 부품에서 이루어진다

1. 10과 20을 메모리에서 기억한다
2. CPU에서 연산한다
3. 연산한 결과를 메모리에서 기억한다

그럼 기억을 담당하는 메모리와 연산을 담당하는 CPU에 대해 더 자세히 알아보자

메모리

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다 메모리 셀 한개의 크기는 1byte(8bit)이다. 데이터가 2진수 형태로 이곳에 저장된다

메모리 셀마다 고유의 주소가 존재한다

컴퓨터는 이 메모리 셀 단위로 데이터를 저장(write) 하거나 읽는다(read)

값을 저장하는 역할

10+20을 연산할때, 우선 10과 20을 메모리 셀에 저장(write)한다 그리고 연산을 할때 메모리 셀을 읽어 10과 20이라는 숫자를 얻어 낸다

값을 식별하기 위한 역할

아까 우리는 10+20을 더해서 30이라는 값을 얻었다. 이 값은 또 다른 메모리 셀에 저장된다

그런데, 자바스크립트에서는 메모리 셀에 직접 접근할 수 없다 자바스크립트 메모리에 관한 내용은 블로그  참고 포인터를 사용할 수 있는 다른 언어와는 다르게, 메모리 주소를 통해 값에 직접 접근할 수 없다 왜냐하면 값이 저장될 때 메모리의 상황에 따라 어디에 저장되는지 임의로 결정된다

그래서, 값에 접근하기 위해서는 항상 변수를 이용해서 값에 접근해야 한다

[!note] 정리 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간, 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다

브라우저에서 컴퓨터의 메모리를 할당 받는다

정리

let a = 10;
let b = 10;
a = 20;

[!note] 왜 이렇게 될까? 왜 값이 바뀌면 새로운 주소를 가리키는걸까? 숫자 리터럴??

용어를 다시 정리하자면 변수에 값을 저장하는 것을 할당, 대입, 저장(assignment) 이라고 하고 변수에 저장된 값을 읽는 것을 참조(reference) 라고 한다

불변성을 구현하기 위해서

4.2 식별자

식별자란 이름에서도 알 수 있듯, 어떤 값을 구별하여 식별할 수 있는 고유한 이름이다

하지만, 식별자는 사실 값을 구별하지는 못한다 대신 메모리 주소를 구별한다 식별자가 기억하고 있는 메모리 주소를 읽고, 그 다음 메모리에 담긴 값을 읽는 과정이 이루어지는 것이다

[!note] 식별자 식별자는 메모리 주소에 붙인 이름이다

따라서 단순한 변수 뿐만 아니라 함수, 클래스 등 메모리에 존재하는 모든 값을 저장하는 이름을 식별자라고 부른다

4.3 변수 선언

변수 선언이란, 변수를 사용하겠다고 선언하여 변수를 생성하는 것을 말한다 과정은 다음과 같이 이루어진다

1. 변수 이름이 선언되면, 메모리 주소 한개를 골라서 메모리 공간을 확보한다
2. 그리고 값을 저장할 수 있다

변수를 선언하기 위해서는 키워드를 사용해야 한다. ES6 전에는 var 키워드 밖에 없었지만, 이후 let과 const가 등장했다 var은 단점이 많기 때문에 let과 const를 사용할 것을 권장한다

아직 let과 const에 대해 배우지 않았으므로, 우선은 var을 이용해 변수 선언에 대해 알아보자

var 선언시 일어나는 과정

1. 변수를 선언된다 var score; 이렇게 선언을 하면, 메모리 공간을 확보할 수 있다

2. 초기값이 설정된다 var score=0; 처럼 사용자가 초기화 해주지 않은 경우에는 값이 undefined로 자동 초기화 된다

undefined는 자바스크립트에서 제공하는 원시 타입의 값이다 자세한 내용은 6장의 [[데이터 타입]] 에서 자세히 알아볼 수 있다

let과 const의 초기값

[!warning] 참고 let은 자동으로 초기화 되지 않는다. 따라서 초기값이 undefined가 아니다 const도 자동으로 초기화 되지 않는다. const는 초기값을 설정해주지 않으면 에러가 발생한다

4.4 변수 선언의 실행 시점과 변수 호이스팅

호스팅? 호이스팅?

호스팅(Hosting)과 호이스팅(Hoisting)은 이름만 비슷한 완전 다른 개념이다- 인도와 인도네시아 정도 차이라고 생각하면 된다

호스팅 은 웹 서비스나 서버 호스팅을 할 때 쓰는 용어이다

홈페이지를 만들어서 AWS서버에 올리면, 서버에 프로젝트가 ‘호스팅’ 되었다 라고 한다

반면 호이스팅은 자바스크립트의 ‘특징’을 지칭하는 용어다.

Javascript는 인터프리터 언어임과 동시에 컴파일 언어다. 그래서 이러한 특징이 존재한다.

호이스팅(Hoisting)의 개념

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 스코프의 상단으로 끌어올려지는 특징이다

코드 실행 전에 JavaScript 엔진에 의해 처리된다

아직 잘 와 닿지 않으니 코드 예시를 보면서 이해해보자.

호이스팅의 종류에는 변수 호이스팅과 함수 호이스팅이 있다.

변수 호이스팅

변수 선언을 하면 코드의 맨 위로 끌어올려진다

[!question] 호이스팅의 이점이 무엇인가요? 어디서든 편리하게 변수를 선언해도 된다

단, 초기화(값 할당)는 끌어올려지지 않는다. 즉 단순히 선언만 해준다. var로 선언된 키워드의 경우, 이때 undefined로 초기화 된다

console.log(x); // x가 선언된 상태라 undefined가 출력된다
var x = 100;
console.log(x); //100이 출력된다

위의 코드는 아래와 같이 JS엔진에 의해 처리된다

var x; //변수 호이스팅, 위로 끌어올려짐
console.log(x); // undefined
var x = 100;
console.log(x); // 100

var로 선언된 변수는 호이스팅이 발생하며, 선언부가 끌어올려지지만 값을 넣어준 부분(초기화 된 부분)은 끌어올려지지 않아 undefined로 출력된다

이를 쉽게 설명해보면, 자바스크립트 엔진은 코드를 쭉 보면서 모든 변수들에 대한 사전을 만든다

예를 들어

console.log(x + y + z); // undefined
var x = 1;
var y = 10;
var z = 100;
console.log(x + y + z); //111

라는 코드가 있을때, 자바스크립트 엔진은 변수 x,y,z를 발견하고 컴파일 전에 변수 사전을 만든다. 이때, 값은 넣지 않고 비워둔다(undifined)

그리고 코드를 하나 하나 실행시키면서 변수 값을 마주칠경우 ( var x=1) 이 사전에 값을 수정해준다.

함수 호이스팅

함수 선언은 함수 전체가 끌어올려진다. 변수 호이스팅과 동일하다

helloWorld(); // "Hello, World!"
function helloWorld() {
  console.log("Hello, World!");
}

위의 코드는 아래와 같이 해석된다

//함수 호이스팅 (맨 위로 올라옴)
function helloWorld() {
  console.log("Hello, World!");
}
helloWorld(); // "Hello, World!"

함수 표현식의 경우 호이스팅이 발생하지 않는다.함수 표현식은 변수 호이스팅이 발생하기 때문에 변수는 호이스팅되지만 함수는 그렇지 않다.

주의해야 할 점은, 호이스팅은 선언부만 끌어올려지며 할당(초기화) 부분은 원래 위치에서 실행된다.

따라서 변수 초기화 전에 변수를 참조하면 undefined가 반환될 수 있다.

함수의 경우는 함수 전체가 끌어올려지므로 선언 이전에 호출해도 정상적으로 작동한다

질문: var / let,const 호이스팅의 차이

let과 const는 블록 스코프를 가지며, 블록 내에서만 접근 가능하다

• var: 변수 선언이 끌어올려져서, 선언 전에 변수에 접근하면 undefined가 나온다

console.log(a); // undefined
var a = 10;
console.log(a); // 10

let과 const: 변수 선언이 끌어올려지지만, 선언 전에는 접근할 수 없다. 선언 전에 접근을 시도하면 오류가 난다

console.log(b); // ReferenceError: b is not defined
let b = 20;
console.log(c); // ReferenceError: c is not defined
const c = 30;

왜냐하면 let과 const는 선언이 호이스팅되지만 초기화는 호이스팅되지 않는다.

TDZ

이렇게 변수가 선언된 되고 나서부터 초기화되기 전까지의 구간을 일시적 사각지대(TDZ)라고 한다 Temporal Dead Zone

4.5 값의 할당

변수에 값을 저장하는 것을 할당 이라고 한 다는 것은 위에서 언급했다 이때, 할당 연산자 =을 사용한다 오른쪽에 있는 값을 왼쪽으로 할당한다

var score = 80;

또한 위에서 호이스팅에 대해 알아볼때 언급했듯이, 변수 선언이 호이스팅 단계에서 먼저 이루어지고, 값의 할당은 나중에 이루어진다

[!note] 변수의 선언과 값의 할당 변수 선언과 값의 할당은 2개의 문으로 나누어져 각각 실행되며 실행 시점도 서로 다르다. 변수 선언이 먼저 이루어진다(이때 초기 할당값은 undefined)

4.6 값의 재할당

[!note] > let var로 선언된 변수는 값의 재할당이 가능하다 const는 재할당이 불가하며, 선언시 초기값을 적어 그 값으로 초기화 해주어야 한다

엄밀히 말하면, 호이스팅에 의해 변수가 처음 선언될때 undefined로 선언되기에, 일반적인 값 할당도 사실은 재할당이다 이 논리를 적용해도, ✏️note 에서 적은 이론이 똑같이 적용되는 것을 알 수 있다

할당과 마찬가지로, 재할당시 메모리 주소가 바뀐다는 것을 알 수 있다 undefined, 80 처럼 사용되지 않는 값은 ==가비지 콜렉터에 의해 메모리에서 자동해제 된다== 단! 메모리에서 언제 해제되는지는 모른다

js개발자가 메모리 주소를 이용해 값에 접근하면 안 된다는 것을 다시 한번 기억하고 넘어가자

[!note] unmanaged lang VS managed lang

unmanaged language

C와 같이 개발자가 명시적으로 메모리를 할당, 해제 할 수 있는 언어를 unmanaged language 라고 한다

managed language

자바스크립트와 같이 개발자가 직접 메모리 제어를 할 수 없고, 가비지 콜렉터가 자동으로 제어해주는 것을 managed language 라고 한다

![[Screenshot 2024-07-17 at 5.15.19 PM 1.png]] ![[Screenshot 2024-07-17 at 6.55.26 PM.png]]

가비지 컬렉터

가비지 컬렉터는 다음과 같은 알고리즘을 사용하여 작동한다

• 참조 카운팅(Reference Counting): 객체가 참조되는 횟수를 추적하고, 참조 횟수가 0이 되면 메모리를 회수합니다.
• 마크 앤 스윕(Mark-and-Sweep): 루트 객체에서 시작하여 도달 가능한 모든 객체를 마크하고, 마크되지 않은 객체는 메모리에서 제거합니다.

4.7 식별자 네이밍 규칙

식별자 규칙

앞서 설명했듯이, 식별자란, 어떤 값을 구분하여 식별 할 수 있는 이름을 의미한다 식별자 이름을 지을때, 규칙이 존재한다

1. 문자, 숫자, 언더스코어(_), 달러기호$ 로만 이루어져야 한다
2. 단, 숫자로 시작할 수는 없다
3. 예약어는 식별자로 사용할 수 없다

예약어

영어 이외의 다른 언어로 이루어진 식별자: 한글 식별자

ES5부터 식별자를 만들 때 유니코드 문자를 허용하기 때문에 한글, 일본어 식별자도 사용할 수 있다 책에서는 한글 식별자를 비추천 했다

한편 토스에서는 한글로 짓는 변수를 짓는 세종대왕 프로젝트를 진행한 적이 있다 관련 게시물: 세종대왕 프로젝트 

(아직까지 사용하는지는 모르겠다)

네이밍 컨벤션

대표적으로 4가지 유형의 네이밍 컨벤션이 있다

카멜 케이스

let devoceanYoung; 소문자대문자

스네이크 케이스

let devocean_young; 소문자_소문자

파스칼 케이스

let DevoceanYoung; 대문자대문자

헝가리언 케이스

let strDevoceanYoung; 타입대문자대문자

일반적으로 변수나 함수의 이름에 카멜 케이스를 사용하고 생성자 함수, 클래스 이름에 파스칼 케이스를 사용한다